<template>
	<view style="padding-bottom: 220rpx;">
		<view class="list-box">
			<view class="align-center list-item">
				<view class="list-bor"></view>
				<view class="list-tit">{{$t('shop').订单信息}}</view>
			</view>
			<view class="align-center list-item">
				<view class="list-text list-left">{{$t('shop').订单号}}</view>
				<view class="list-text ml10">{{orderInfo.order_sn}}</view>
				<view class="list-copy" @click="copyBtn(orderInfo.order_sn)">{{$t('index').复制}}</view>
			</view>
			<view class="align-center list-item">
				<view class="list-text list-left ">{{$t('shop').提交时间}}</view>
				<view class="list-text ml10">{{orderInfo.pay_time}}</view>
			</view>
			<view class="align-center list-item">
				<view class="list-text list-left">{{$t('shop').状态}}</view>
				<view class="list-text ml10" v-if="orderInfo.order_status==1">{{$t('common').待付款}}</view>
				<view class="list-text ml10 red2" v-if="orderInfo.order_status==2">{{$t('common').待发货}}</view>
				<view class="list-text ml10" v-if="orderInfo.order_status==3">{{$t('common').已完成}}</view>
				<view class="list-text ml10"
					v-if="orderInfo.order_status==4 &&((Date.parse(orderInfo.pay_time)+21600000)<(Date.now()))">
					{{$t('common').已取消}}
				</view>
			</view>
		</view>
		<!--  -->
		<view class="list-box" v-if="orderInfo.order_status==3">
			<view class="align-center list-item">
				<view class="list-bor"></view>
				<view class="list-tit">{{$t('shop').物流信息}}</view>
			</view>
			<view class="align-center list-item">
				<view class="list-text list-left ">{{orderInfo.ems_company_name}}{{$t('shop').快递}}</view>
				<view class="list-text ml10">{{orderInfo.delivery_no}}</view>
				<view class="list-copy" @click="copyBtn(orderInfo.delivery_no)">{{$t('index').复制}}</view>
			</view>
		</view>

		<view class="list-box">
			<view class="align-center list-item">
				<view class="list-bor"></view>
				<view class="list-tit">{{$t('shop').收货信息}}</view>
			</view>
			<view class="align-center list-item">
				<view class="list-text  mr15 bold">{{orderInfo.receive_name}}</view>
				<view class="list-text">{{orderInfo.receive_phone}}</view>
			</view>
			<view class="align-center list-item">
				<view class="list-text flex1">
					{{orderInfo.receive_province}}{{orderInfo.receive_city}}{{orderInfo.receive_district}}{{orderInfo.receive_address}}
				</view>
			</view>
		</view>

		<view class="list-box">
			<view class="align-center list-item">
				<view class="list-bor"></view>
				<view class="list-tit">{{$t('shop').产品信息}}</view>
			</view>
			<view class="list-item">
				<view class="good-box align-center" v-if="orderInfo.cart_info">
					<image class="good-img"
						:src="orderInfo.cart_info.product.sku[0].image?orderInfo.cart_info.product.sku[0].image:orderInfo.cart_info.product.cover"
						mode="aspectFill"></image>
					<view class="good-right">
						<view class="good-name clamp2">{{orderInfo.good_name}}</view>
						<view class="good-gg gray9">{{$t('shop').规格}}：{{orderInfo.good_sku_name}}</view>
						<view class="align-center justify-between" style="margin-top: 30rpx;">
							<view class="good-price gray3">
								{{orderInfo.area==1?'':'$'}}{{parseFloat(orderInfo.good_price || 0)}}
							</view>
							<view class="good-num gray9">x{{orderInfo.good_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list-box">
			<view class="align-center list-item">
				<view class="list-bor"></view>
				<view class="list-tit">{{$t('shop').补充人信息}}</view>
			</view>
			<view class="list-item align-center" v-if="orderInfo.suppuser">
				<image class="list-n-img" :src="orderInfo.suppuser.avatar" mode=""></image>
				<view class="list-n-text gray3">{{orderInfo.suppuser.nickname}}</view>
			</view>
		</view>

		<view class="dh-box align-center justify-between">
			<view class="dh-text">{{$t('shop').兑换使用}}</view>
			<view class="dh-text">{{orderInfo.area==1?'':'$'}}{{parseFloat(orderInfo.total_price|| 0)}}</view>
		</view>

		<view v-if="orderInfo.order_status==3" class="bot-box align-center"
			@click="navTo(`/pages/mine/logInfo?order_id=${order_id}&ems_company_name=${orderInfo.ems_company_name}&delivery_no=${orderInfo.delivery_no}`)">
			<view class="bd99 bot-btn plr15 ptb5">{{$t('shop').查看物流}}</view>
		</view>
		<view
			v-if="orderInfo.order_status==1 || orderInfo.order_status==2&&((Date.parse(orderInfo.pay_time)+21600000)>(Date.now()))"
			class="bot-box align-center" @click="qxShow()">
			<view class="bot-btn plr15 ptb5" style="border: 2rpx solid #2A2A2A;">{{$t('shop').取消订单}}</view>
		</view>
		<!-- 取消订单 -->
		<!-- 		<u-popup :show="qxpop" mode="center" round="10">
			<view class="qx-box">
				<view class="qx-text">{{}}</view>
				<view class="qx-bot align-center">
					<view class="qx-btn" @click="qxHide(1)">{{$t('common').确认}}</view>
					<view class="qx-btn" @click="qxHide(0)">{{$t('common').取消}}</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 底部弹窗   是否是指默认密码 -->
		<view class="">
			<u-modal :showCancelButton="true" :confirmText="$t('common').取消" confirmColor="#333333"
				cancelColor="#333333" :cancelText="$t('common').确认" width="600rpx" :show="show"
				:content="$t('shop').确定要取消订单吗取消后不可恢复请谨慎" :closeOnClickOverlay="closeOnClickOverlay" @cancel="qxHide()"
				@close="cancel()" @confirm="cancel()"></u-modal>
		</view>
		<!-- 返回首页 -->
		<view @click="goindex()" class="bgWhite radius50 justify-center align-center posFixed zIndex999"
			style="width: 80rpx;height: 80rpx;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(187,187,187,0.3); right: 24rpx;bottom: 120rpx;">
			<view class="ft10 gray9" style="width: 40rpx;"><text>{{$t('shop').返回首页}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '', //订单id
				orderInfo: {}, //订单详情
				curreny: uni.getStorageSync('currency'), //币种
				qxpop: false,
				show: false,
				closeOnClickOverlay: true

			}
		},

		onLoad(options) {
			this.$store.dispatch('getuserInfo')
			this.order_id = options.orderid
			this.orderdetailAPI()
			uni.setNavigationBarTitle({
				title: this.$t('shop').补充详情
			})
		},

		methods: {
			// 获取订单详情
			async orderdetailAPI() {
				const res = await this.$api.orderdetail({
					order_id: this.order_id
				})
				this.orderInfo = res.data
			},
			// 复制
			copyBtn(value) {
				uni.setClipboardData({
					//准备复制的数据
					data: value,
					success: function(res) {
						uni.showToast({
							title: this.$t('shop').复制成功,
						});
					}
				})
			},
			// 取消弹窗打开
			qxShow(n) {
				// this.qxpop = true;
				this.show = true
			},
			// 取消弹窗关闭
			async qxHide(val) {
				// if (val == 1) {

				// } else {
				// 	this.qxpop = false;
				// }
				const res = await this.$api.canceorder({
					order_id: this.order_id
				})
				if (res && res.code == 1) {
					this.$utils.msg(this.$t('shop').取消成功)
					// this.qxpop = false;
					this.show = false
					this.orderdetailAPI()
				}
			},
			cancel() {
				this.show = false
			},
			// 返回首页
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.bot-box {
		width: 100vw;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 24px;
		background: #ffffff;
		justify-content: end;

		.bot-btn {
			// width: 160rpx;
			// height: 60rpx;
			// text-align: center;
			// line-height: 60rpx;
			border-radius: 100rpx;
		}
	}

	.dh-box {
		width: 100vw;
		height: 92rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 16rpx;

		.dh-text {
			color: #2A2A2A;
			font-size: 28rpx;
		}
	}

	.list-n-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		margin-right: 12rpx;
	}

	.list-n-text {
		font-size: 24rpx;
		font-weight: bold;
	}

	.list-box {
		background: #fff;
		padding: 34rpx 24rpx 15rpx;
		border-bottom: 2rpx solid #EEEEEE;

		.list-item {
			margin-bottom: 24rpx;

			.list-bor {
				width: 6rpx;
				height: 24rpx;
				background: #2A2A2A;
				border-radius: 3rpx;
				margin-right: 16rpx;
			}

			.list-tit {
				color: #2A2A2A;
				font-size: 28rpx;
				font-weight: 500;
			}

			.list-text {
				font-size: 28rpx;

			}

			.list-copy {
				width: 80rpx;
				height: 36rpx;
				color: #2A2A2A;
				font-size: 24rpx;
				text-align: center;
				line-height: 36rpx;
				border-radius: 100rpx;
				border: 2rpx solid #2A2A2A;
				margin-left: 24rpx;
			}

			.list-left {
				width: 136rpx;
			}
		}

	}

	.good-box {
		background: #ffffff;

		.good-img {
			width: 176rpx;
			height: 176rpx;
			border-radius: 10rpx;
		}

		.good-right {
			width: 526rpx;
			box-sizing: border-box;
			padding-left: 24rpx;

			.good-name {
				color: #2A2A2A;
				font-size: 28rpx;
				// font-weight: bold;
				margin-bottom: 12rpx;
			}

			.good-gg {
				font-size: 24rpx;
			}

			.good-price {
				color: #2A2A2A;
				font-size: 24rpx;
			}

			.good-num {
				font-size: 24rpx;
			}
		}
	}

	.qx-box {
		width: 600rpx;
		height: 283rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}
</style>